.play {
	display: flex;
	flex-direction: column;

	.main {
		position: relative;
		height: 1px;
		flex-grow: 1;
		color: #fff;

		#video {
			width: 100%;
			height: 100%;
			background: #000;
		}

		h2 {
			position: absolute;
			left: 20px;
			bottom: 80px;
			font-size: 50px;
		}

		h3 {
			position: absolute;
			left: 20px;
			bottom: 40px;
			font-weight: normal;
		}
	}

	.progress {
		height: 90px;
		display: flex;
		justify-content: space-around;
		align-items: center;

		i {
			font-size: 40px;
		}
		.icon-bofang {
			display: none;
		}
	}

	.progress-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;

		background: #4294ff;
		width: 0%;
		height: 90px;
	}

	// 弹出层
	#mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(33, 33, 33, 0.9);
		display: none;
	}

	#box {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		display: none;

		div {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: #ccc;
			text-align: center;
			color: #fff;
			padding-top: 10px;

			i {
				display: block;
				font-size: 40px;
			}
		}

		#playBox {
			text-align: center;
			background: rgb(9, 154, 9);
			i {
				margin-bottom: 5px;
			}
		}

		#endBox {
			text-align: center;
			background: rgb(206, 10, 10);
		}
	}
}
